babel-plugin-syntax-trailing-function-commas

What is babel-plugin-syntax-trailing-function-commas?

The babel-plugin-syntax-trailing-function-commas npm package allows Babel to parse trailing commas in function parameter lists and calls. This is particularly useful for improving the readability and maintainability of code by allowing developers to add new parameters without modifying the last line of the existing parameters.

What are babel-plugin-syntax-trailing-function-commas's main functionalities?

Parsing trailing commas in function parameters

This feature enables the parsing of trailing commas in function parameter lists, which can help in minimizing diff outputs when new parameters are added.

function example(a, b, c,) {\n  return a + b + c;\n}

Parsing trailing commas in function calls

This feature allows for trailing commas in function calls, aligning with the enhanced syntax capabilities for array and object literals.

example(1, 2, 3,);

0

README

babel-plugin-syntax-trailing-function-commas

Compile trailing function commas to ES5

function clownPuppiesEverywhere(
  param1,
  param2,
) { /* ... */ }

clownPuppiesEverywhere(
  'foo',
  'bar',
);

Try in REPL

Example

Basic

This is an example from the Proposal.

Let's say you have this function:

function clownPuppiesEverywhere(
  param1,
  param2
) { /* ... */ }

clownPuppiesEverywhere(
  'foo',
  'bar'
);

If you want to have a new parameter called param3, the diff output would be like that:

function clownPuppiesEverywhere(
  param1,
- param2
+ param2, // Change this line to add a comma
+ param3  // Add param3
) { /* ... */ }

clownPuppiesEverywhere(
  'foo',
- 'bar'
+ 'bar', // Change this line to add a comma
+ 'baz'  // Add param3
);

In total, you have to change 2 lines for the function declaration and 2 lines for each usage.

If you had your function defined with trailing commas:

function clownPuppiesEverywhere(
  param1,
  param2,
) { /* ... */ }

clownPuppiesEverywhere(
  'foo',
  'bar',
);

Adding a new parameter would only change one line in the function declaration and one line for each usage:

function clownPuppiesEverywhere(
  param1,
  param2,
+ param3, // Add param3
) { /* ... */ }

clownPuppiesEverywhere(
  'foo',
  'bar',
+ 'baz', // Add param3
);

In the end, your diff output will be cleaner and easier to read, it would be much quicker to add a new parameter to your functions, it also makes it easier to copy paste elements and move code around.

Installation

npm install --save-dev babel-plugin-syntax-trailing-function-commas

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["syntax-trailing-function-commas"]
}

Via CLI

babel --plugins syntax-trailing-function-commas script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["syntax-trailing-function-commas"]
});

References

• Proposal
• Spec
• Why you should enforce Dangling Commas for Multiline Statements